<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html{
            width: 3000px;
            height: 5000px;
        }

        .box {
            width: 200px;
            height: 200px;
            padding: 10px;
            border: 1px solid #333;
            background-color: aquamarine;
            margin: 50px;
            overflow:auto;
            /* display: none; */
        }
        .sub{
            width: 1000px;
            height: 1000px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="box">
        
    </div>
</body>
<script>

    /* 
        页面版心不超过1280

        PC端常见分辨率:
            1280 x 960 
            1366 x 768
            1920 x 1080       @x1.25
            2560 x 1440       @x1.5  @x2     page(页面 => 最多1707) x 1.5 = 2560  page(高 最多 960) x 1.5 = 1440
            3456 x ??         @x2
    */


    var box = document.querySelector(".box");


    // 元素的
    // clientWidth  clientHeight  可视宽高 (content + padding)

    // scrollWidth  scrollheight  元素的实际宽高  (content(包含滚动条) + padding) => 元素在文档中实际占据的宽高(包含滚动条)

    // scrollLeft  scrollTop   元素内的滚动条,距离元素左边和顶部的位置 (可以取值和赋值 => 改变滚动条的位置)


    // html的
    // document.documentElement.clientWidth  document.documentElement.clientHeight  文档的可视宽高
    // document.documentElement.scrollWidth  document.documentElement.scrollHeight  文档的实际宽高
    // document.documentElement.scrollLeft   document.documentElement.scrollTop     滚动条距离文档左边和顶部的距离 (页面向上滚动的距离)


    console.log(document.documentElement.clientWidth,document.documentElement.clientHeight);
    console.log(document.documentElement.scrollWidth,document.documentElement.scrollHeight);

    window.onscroll = function(){
        console.log("滚动条距离顶部的位置", document.documentElement.scrollTop );
    }


    document.onclick = function(){
        // document.documentElement.scrollTop = 0;

        var timer = setInterval(function(){
            document.documentElement.scrollTop -= 100;
            if(document.documentElement.scrollTop == 0){
                clearInterval(timer);
            }
        },10)

    }

</script>

</html>